<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			通常父子组件传值通过props和$emit传递，
			如果多层组件嵌套，C嵌套于B，B嵌套于A，A直接传递数据到C，可以使用$attrs传递数据  $listeners更新数据
			
			inheritAttrs：
				前提：子组件的props中未注册父组件传递过来的属性，即子组件的props属性中没有"aaa"
				1.当设置inheritAttrs: true（默认）时，子组件的顶层标签DOM元素中会渲染出父组件传递过来的属性(aaa="1111")。
				2.当设置inheritAttrs: false时，子组件的顶层标签DOM元素中不会渲染出父组件传递过来的属性(aaa="1111")。
				3.不管inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性
		</pre>
		<div id="app">
			<App />
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let GrandSon = {
				template: `<div class="grand">这是孙组件，获取的父组件信息为：{{coo}} {{ceo}}
					<button type="button" @click="changeData">点击更新数据到父组件</button>
					<button type="button" @click="changeChildData">点击更新数据到Child组件</button>
					</div>`,
				props: ['coo','ceo'],//即使props中加入foo也无法获取值，因为foo属性已在Child组件注册
				data(){
					return {
						
					}
				},
				methods: {
					changeData(){
						this.$emit('updateData', {
							name: 'zhang',
							age: '22'
						})
					},
					changeChildData(){
						this.$emit('updateChildData', {
							name: 'qianfeng'
						})
					}
				},
			}
			let Child = {
				props: ['foo'],
				inheritAttrs: true,
				template:`<div class="child">这是子组件,获取的父组件信息为:{{foo}}
					<GrandSon  v-bind="$attrs" v-on="$listeners" @updateChildData="updateChildData" />
				</div>`,
				components: {
					GrandSon,
				},
				mounted(){
					//$attrs属性获取子组件的props中未注册父组件传递过来的属性，即除了foo以外的属性
					console.log('this.$attrs:', this.$attrs)
				},
				methods: {
					updateChildData(data){
						console.log(data)
					}
				}
			}
			let App = {
				template: '<div class="parent">这是父组件<Child :foo="foo" :coo="coo" :ceo="ceo" @updateData="updateData" /></div>',
				data(){
					return {
						foo: '父组件内容foo',
						coo: '父组件内容coo',
						ceo: '父组件内容ceo',
					}
				},
				components: {
					Child,
				},
				methods: {
					updateData(data){
						console.log(data)
					},
				},
			}
			let vm = new Vue({
				el: '#app',
				data(){
					return {}
				},
				components: {
					App,
				},
			})
		</script>
	</body>
</html>
